<template>
	<div ref="chartRef" id="OperationOverviewRightEcharts" style="width: 100%; height: 300px"></div>
</template>
<script lang="js" setup>
	import * as echarts from 'echarts';
	import {ref, reactive, computed, unref, watchEffect, onMounted} from 'vue';
	const props = defineProps({
		chartData: {
			type: Array,
			default: () => [],
		},
	});

	watch(
		() => props.chartData,
		() => {
			initCharts();
		},
		{
			deep: true,
		}
	);
	let myChart = ref(null);
	const option = reactive({
		// backgroundColor: '#080b30',

		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: 'rgba(0, 255, 233,0)',
							},
							{
								offset: 0.5,
								color: 'rgba(255, 255, 255,1)',
							},
							{
								offset: 1,
								color: 'rgba(0, 255, 233,0)',
							},
						],
						global: false,
					},
				},
			},
		},
		grid: {
			top: '1%',
			left: '1%',
			right: '1%',
			// bottom: '15%',
			// containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				axisLine: {
					show: true,
				},
				splitArea: {
					// show: true,
					color: '#f00',
					lineStyle: {
						color: '#f00',
					},
				},
				axisLabel: {
					color: '#fff',
				},
				splitLine: {
					show: false,
				},
				boundaryGap: false,
				data: ['A', 'B', 'C', 'D', 'E', 'F'],
			},
		],

		yAxis: [
			{
				type: 'value',
				min: 0,
				// max: 140,
				splitNumber: 4,
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.1)',
					},
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: false,
					margin: 20,
					textStyle: {
						color: '#d1e6eb',
					},
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: [
			{
				name: '充电功率',
				type: 'line',
				smooth: true, //是否平滑
				showAllSymbol: true,
				// symbol: 'image://./static/images/guang-circle.png',
				symbol: 'circle',
				symbolSize: 15,
				lineStyle: {
					normal: {
						color: '#00b3f4',
						shadowColor: 'rgba(0, 0, 0, .3)',
						shadowBlur: 0,
						shadowOffsetY: 5,
						shadowOffsetX: 5,
					},
				},
				label: {
					show: true,
					position: 'top',
					textStyle: {
						color: '#00b3f4',
					},
				},
				itemStyle: {
					color: '#00b3f4',
					borderColor: '#fff',
					borderWidth: 3,
					shadowColor: 'rgba(0, 0, 0, .3)',
					shadowBlur: 0,
					shadowOffsetY: 2,
					shadowOffsetX: 2,
				},
				tooltip: {
					show: true,
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: 'rgba(0,179,244,0.3)',
								},
								{
									offset: 1,
									color: 'rgba(0,179,244,0)',
								},
							],
							false
						),
						shadowColor: 'rgba(0,179,244, 0.9)',
						shadowBlur: 20,
					},
				},
				data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
			},
		],
	});
	function initCharts() {
		let seriesData = props.chartData.map((item) => {
			return parseFloat(item.avgGl.toFixed(2));
		});
		let xAxisData = props.chartData.map((item) => {
			return item.date;
		});
		option.series[0].data = seriesData;

		option.xAxis[0].data = xAxisData;
		//   setOptions(option);
		myChart = echarts.init(document.getElementById('OperationOverviewRightEcharts'));

		myChart.setOption(option);
	}
	// const myChart = ref(null);

	onMounted(() => {
		console.log('OperationOverviewRightEchart1111s', props.chartData);
		initCharts();

		window.addEventListener('resize', () => {
			myChart.resize();
		});
	});
</script>
